import { reactive, ref, toRaw, onMounted } from "vue";
import type { PaginationProps } from "@pureadmin/table";
import { getMaintainList } from "@/api/data";

export function useRole() {
  const tableData = ref([]);
  const loading = ref(true);
  const isShow = ref(false);
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  });
  const form = reactive({
    page: 1,
    pageSize: 10,
    name: ""
  });

  const columns: TableColumnList = [
    {
      type: "selection",
      align: "left"
    },
    {
      label: "序号",
      type: "index",
      width: "100"
    },
    {
      label: "表名称",
      prop: "name",
      minWidth: 160
    },
    {
      label: "表描述",
      prop: "comment"
    },

    {
      label: "创建时间",
      prop: "create_time",
      minWidth: 120
    }
  ];

  function handleSizeChange(val: number) {
    form.pageSize = val;
    onSearch();
  }

  function handleCurrentChange(val: number) {
    form.page = val;
    onSearch();
  }

  const resetForm = formEl => {
    if (!formEl) return;
    formEl.resetFields();
    onSearch();
  };

  async function onSearch() {
    loading.value = true;
    const { data } = await getMaintainList(toRaw(form));
    tableData.value = data.list;
    pagination.total = data.total;
    pagination.pageSize = data.pageSize;
    pagination.currentPage = data.currentPage;
    setTimeout(() => {
      loading.value = false;
    }, 500);
  }
  onMounted(async () => {
    onSearch();
  });
  return {
    form,
    isShow,
    tableData,
    columns,
    pagination,
    onSearch,
    resetForm,
    handleSizeChange,
    handleCurrentChange
  };
}
